Kitty Front-end Outline

Overview#

In Part 1 we created all of the back-end portion of our Kitties application. In this part, it's time to build a user interface which can access and interact with our custom storage items and functions. We'll be using the Front-end Template, a React app with some basic functionality, and the Polkadot JS API to make RPC's to our chain's runtime.

In Part 2, there will only be two main sections: the first focussing on setting up the Front-end Template and the second focussing on building custom React components that can interact with our kitty-node.

We'll be using a library for generating Cat avatars, licensed under CC-By 4.0 attribution. Thank you David Revoy's for making this available.

Learning outcomes#

➡️ Connect your chain to the Substrate front-end template.

Steps#

1. Understanding the Front-end template#

The first step of this tutorial is to familiarize yourself with the Substrate Front-end template. In this step we will go through an overview of what our React app will look like and the different components we'll be building.

Start by installing the Front-end Template:

git clone https://github.com/substrate-developer-hub/substrate-front-end-template.git
cd substrate-front-end-template
yarn install

You'll notice the following structure (we've only including the directories we care about for this tutorial):

substrate-front-end-template
|
...
|
+-- public
|   |
|   +-- assets              <-- Kitty avatar PNG files
|
+-- src                     <-- our React components
|   |
|   +-- __tests__
|   |
|   +-- config              <-- where to specify our custom types
|   |
|   +-- substrate-lib       <-- lib to give access to PolkadotJS API 
|   |   |
|   |   +-- components      <-- contains TxButton, used throughout our application
|   |
|   AccountSelector.js
|   App.js
|   Balances.js
|   BlockNumber.js
|   Events.js
|   index.js
|   interactor.js
|   Metadata.js
|   NodeInfo.js
|   TemplateModule.js
|   Transfer.js
|   Upgrade.js
|
...

In a separate terminal, start an instance of node-kitties that you built in Part 1:

# Launch `node-kitties` from its directory.
cd kitties/
./target/release/node-kitties --dev --tmp

Now, in the same directory as where you installed the Front-end template, launch it:

yarn start

You should see a tab open up with the front-end template displaying basic features of your chain.

Notice that it comes with a number of prebuilt features, each being rendered by the provided components of the Front-end Template.

2. Specifying Types#

An important starting point when setting up a custom front-end for a Substrate node is creating a JSON file with all of the node's custom types. These are types that we created in our pallet that the Polkadot JS API doesn't know about. Learn more about Extending types in the Polkadot JS API documentation.

In our case, we have two custom types we'll need to add: the Gender enum and the Kitty struct.

To do this, go into src/config/types.json and paste in the following lines:

{
  "Gender": {
    "_enum": ["Male", "Female"]
  },
  "Kitty": {
    "dna": "[u8; 16]",
    "price": "Option<Balance>",
    "gender": "Gender",
    "owner": "AccountId"
  }
}

3. Sketching out our application components#

Substrate Frontend Template components use PolkadotJS Apps and an RPC endpoint to communicate with a Substrate node. This allows us to use it to read storage items, and pass in inputs to allows users to make extrinsics by calling our pallet's dispatchable functions. Before we get to that, let's sketch out the different parts of our application.

We'll be building out a total of 3 components:

KittyCards.js: this will render a React card component containing a Kitty's relevant information, avatar and buttons to interact with it.
KittyAvatar.js: this will handle the logic to map Kitty DNA to the library of PNGs we're using to create unique Kitty avatars.
Kitties.js: this will be what we render to App.js.

4. Polkadot JS API basics#

Before moving on to the next section, we reccommend you read a little Polkadot JS API documentation to understand the basics of how we'll be querying storage and triggering transactions. Here are some good resources:

Basics and Metadata
RPC queries
Storage methods such as api.query.<module>.<method> to access a pallet instance in a runtime
Extrinsics methods such as api.tx.<module>.<method> to trigger a transaction.

Next steps#

Build the Kitties.js component
Build the KittyAvatar.js component
Build the KittyCards.js Component